<template>
  <a-list
    class="material-box"
    :loading="loading"
    item-layout="horizontal"
    :data-source="data"
  >
    <template #renderItem>
      <a-list-item>
        <template #actions>
          <a>预览</a>
        </template>
        <a-list-item-meta>
          <template #title>
            <span>在线学习服务师宣传海报.jpg</span>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts" setup>
const loading = false;

const data: any[] = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];
</script>

<style lang="scss" scoped>
.material-box {
  :deep(.ant-list-item) {
    padding: 15px 0;
    border-color: #eee !important;
    &:last-child {
      border-bottom: 1px solid #f0f0f0;
    }
  }
  :deep(.ant-list-item-meta-title) {
    line-height: 23px;
    margin: 0;
  }
}
</style>
